<template>
  <div>
<<<<<<< HEAD
    <!-- 导航栏 -->
    <van-nav-bar title="奈雪的茶" fix></van-nav-bar>
    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#979598">
      <van-swipe-item>
        <img class="img" src="/images/swipe/banner_1.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="img" src="/images/swipe/banner_2.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="img" src="/images/swipe/banner_3.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="img" src="/images/swipe/banner_4.png" />
      </van-swipe-item>
    </van-swipe>
=======
    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#979598">
      <van-swipe-item>
        <van-image class="swimg" src="/images/swipe/1.jpeg" />
      </van-swipe-item>
      <van-swipe-item>
        <van-image class="swimg" src="/images/swipe/2.jpeg" />
      </van-swipe-item>
      <van-swipe-item>
        <van-image class="swimg" src="/images/swipe/3.jpeg" />
      </van-swipe-item>
      <van-swipe-item>
        <van-image class="swimg" src="/images/swipe/4.jpeg" />
      </van-swipe-item>
    </van-swipe>
    <!-- 会员信息 -->
    <div class="msg" v-if="this.$store.state.islogin">
      <div class="lmsg">
        <van-image src="/images/avatar/1.png" />
        <div class="ltext">
          <p>用户名</p>
          <div class="process">
            <div class="prolin">
              <div class="pin" :style="{ width: width + '%' }"></div>
            </div>
            <p>{{ width }}/100</p>
          </div>
        </div>
      </div>
      <div class="rmsg">
        <router-link to="/integral">
          <div class="items">
            <p>6</p>
            <p>积分</p>
          </div>
        </router-link>
        <router-link to="/coupon">
          <div class="items">
            <p>2</p>
            <p>奈雪劵</p>
          </div>
        </router-link>
        <div class="items">
          <p>3</p>
          <p>会员码</p>
        </div>
      </div>
    </div>
    <!-- 初始化 -->
    <div class="default" v-else>
      <div class="ldef">
        <van-image
          class="nximg"
          width="23vw"
          height="10vw"
          src="/images/indexs/10.png"
        />
        <p>注册领10元新人入会礼</p>
      </div>
      <div class="rdef">
        <van-button class="btn" plain round>会员登录</van-button>
      </div>
    </div>
    <!-- 自取/外卖 -->
    <div class="buy">
      <div class="buyit">
        <div class="take">
          <van-image src="/images/indexs/1.png" />
          <h2>自取</h2>
          <p>预约点单，到店自取</p>
        </div>
        <div class="border"></div>
        <div class="delivery">
          <van-image src="/images/indexs/2.png" />
          <h2>外卖</h2>
          <p>外卖下单，快速送达</p>
        </div>
      </div>
      <div class="together">
        <div class="drink">
          <van-image src="/images/indexs/3.png" />
          <p>一起喝</p>
        </div>
        <p class="laugh">新年团聚，欢声笑语一起喝</p>
      </div>
    </div>
    <!-- 商城卡片 -->
    <div class="cards">
      <router-link to="/product">
        <div class="card">
          <h3>奈雪的茶商城</h3>
          <p>好茶随行 美好常在</p>
          <van-image src="/images/indexs/4.jpeg" />
        </div>
      </router-link>
      <router-link to="/memberstore">
        <div class="card">
          <h3>储值有礼</h3>
          <p>储值300立赠1杯</p>
          <van-image src="/images/indexs/5.jpeg" />
        </div>
      </router-link>
      <router-link to="/giftcard">
        <div class="card">
          <h3>心意卡</h3>
          <p>情人节送TA心意</p>
          <van-image src="/images/indexs/6.jpeg" />
        </div>
      </router-link>
    </div>
    <!-- 好喝榜 -->
    <div class="hot">
      <div class="commend">
        <h2>2月好喝榜</h2>
        <p>跟着大家选，款款都不错</p>
      </div>
      <van-swipe
        class="my-swipe"
        :show-indicators="false"
        :loop="false"
        :width="210"
      >
        <van-swipe-item class="items">
          <div class="page">
            <div class="cups">
              <van-image src="/images/indexs/5.jpeg" />
              <div class="cupmsg">
                <p class="pname">霸气芝士玫瑰草莓覆盆子</p>
                <div class="price">
                  <p class="curpri">¥32</p>
                  <p class="oripri">¥38</p>
                </div>
              </div>
              <van-button class="addbtn" round>+</van-button>
            </div>
            <div class="cups">
              <van-image src="/images/indexs/5.jpeg" />
              <div class="cupmsg">
                <p class="pname">鸭屎香宝藏茶</p>
                <div class="price">
                  <p class="curpri">¥23</p>
                  <p class="oripri">¥32</p>
                </div>
              </div>
              <van-button class="addbtn" round>+</van-button>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item class="items">
          <div class="page">
            <div class="cups">
              <van-image src="/images/indexs/5.jpeg" />
              <div class="cupmsg">
                <p class="pname">霸气芝士葡萄</p>
                <div class="price">
                  <p class="curpri">¥28</p>
                  <p class="oripri">¥32</p>
                </div>
              </div>
              <van-button class="addbtn" round>+</van-button>
            </div>
            <div class="cups">
              <van-image src="/images/indexs/5.jpeg" />
              <div class="cupmsg">
                <p class="pname">黑糖珠珠宝藏茶</p>
                <div class="price">
                  <p class="curpri">¥21</p>
                  <p class="oripri">¥38</p>
                </div>
              </div>
              <van-button class="addbtn" round>+</van-button>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 会员新鲜事 -->
    <div class="news">
      <div class="vip">
        <h3>会员新鲜事</h3>
        <router-link to="/news">更多&gt;</router-link>
      </div>
      <van-image src="/images/indexs/8.png" />
      <router-link to="/store">
        <van-image src="/images/indexs/9.png" />
      </router-link>
    </div>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
  </div>
</template>

<script>
<<<<<<< HEAD
export default {};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  text-align: center;
}
.img {
  width: 100vw;
}
=======
export default {
  data() {
    return {
      width: 50,
    };
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  text-align: center;
}
.swimg {
  width: 100vw;
}
.default {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 3vw;
}
.default .ldef .nximg {
  display: block;
  align-items: flex-start;
  margin-left: 3vw;
}
.default .ldef p {
  font-size: 3vw;
  margin: 1vw 4vw 0 4vw;
}
.default .rdef {
  margin: 0 3vw;
}
.default .rdef .btn {
  width: 26vw;
  height: 9vw;
  margin-top: 1vw;
  color: #a7d500;
  border-color: #a7d500;
}
.msg {
  display: flex;
  margin: 2vw 3vw;
  justify-content: space-between;
}
.msg .lmsg {
  display: flex;
  width: 28vw;
  margin: 0 4vw;
  align-items: center;
  justify-content: space-between;
}
.msg .lmsg p {
  font-size: 3vw;
  margin: 2vw;
  text-align: left;
}
.msg .lmsg img {
  display: inline-block;
  width: 12vw;
}
.msg .rmsg .items p {
  color: #6f7275;
}
.process {
  width: 30vw;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 2vw;
}
.process .prolin {
  width: 15vw;
  height: 2vw;
  background-color: #eaeaea;
  border-radius: 3vw;
  margin: 0;
}
.process .prolin .pin {
  height: 2vw;
  background-color: #a7d500;
  border-radius: 3vw;
}
.msg .rmsg {
  display: flex;
  width: 38vw;
  margin-right: 1vw;
  align-items: center;
  justify-content: space-between;
}
.msg .items p {
  margin: 2vw 0;
  font-size: 2vw;
}
.buy {
  margin: 3vw;
  padding: 1vw 3vw 0 3vw;
  background-color: #fff;
}
.buy .buyit {
  display: flex;
  justify-content: space-between;
  margin: 0 2vw;
}
.buy .buyit h2 {
  font-size: 5vw;
  font-weight: bold;
  margin: 3vw 0;
}
.buy .buyit p {
  color: #919699;
  margin: 3vw 0;
  font-size: 4vw;
}
.buy .buyit img {
  width: 18vw;
}
.buy .buyit .border {
  width: 0vw;
  height: 34vw;
  border-left: 1px solid #dee1e3;
}
.buy .together {
  height: 13vw;
  line-height: 13vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #dee1e3;
}
.buy .together .laugh {
  color: #919699;
  font-size: 4vw;
}
.buy .together .drink {
  display: flex;
}
.buy .together .drink p {
  font-size: 4vw;
  margin-left: 1vw;
}
.buy .together .drink img {
  width: 14vw;
  height: 13vw;
}
.cards {
  display: flex;
  justify-content: space-between;
  margin: 3vw 3vw;
}
.cards .card {
  width: 29vw;
  height: 37vw;
  background-color: #fff;
}
.cards .card h3 {
  color: #000;
  padding: 3vw 0;
  font-size: 4vw;
}
.cards .card p {
  margin-bottom: 3vw;
  font-size: 1vw;
  color: #919699;
}
.cards .card img {
  width: 18vw;
}
.hot {
  margin: 0 3vw;
  border-radius: 2vw;
  opacity: 0.7;
  padding: 2vw 3vw;
  background: linear-gradient(#afde04, #9ac501);
}
.hot .commend {
  text-align: left;
  padding: 1vw;
}
.hot .commend h2 {
  margin-left: 2vw;
}
.hot .commend p {
  font-size: 2vw;
  margin: 2vw 0 1vw 2vw;
}
.hot .my-swipe .items {
  display: flex;
  overflow: hidden;
}
.hot .my-swipe .page {
  width: 55vw;
  height: 36vw;
  background-color: #dee1e3;
  border-radius: 2vw;
}
.hot .page .cups {
  display: flex;
  margin: 2vw;
  align-items: center;
  background-color: antiquewhite;
}
.hot .page .cups img {
  width: 15vw;
  border-radius: 2vw;
}
.hot .page .cupmsg {
  margin-left: 3vw;
}
.hot .page .cupmsg .pname {
  width: 23vw;
  text-align: left;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.hot .page .cupmsg .price {
  display: flex;
  align-items: center;
  margin-left: 3vw;
}
.hot .page .cupmsg p {
  margin-top: 2vw;
  font-size: 3vw;
}
.hot .page .cupmsg .curpri {
  margin-right: 2vw;
}
.hot .page .cupmsg .oripri {
  font-size: 3vw;
  text-decoration: line-through;
}
.hot .page .cups .addbtn {
  width: 3vw;
  height: 6vw;
  margin-top: 6vw;
}

.news {
  margin: 2vw 3vw 13vw 3vw;
}
.news div {
  display: flex;
  justify-content: space-between;
}
.news .vip {
  margin: 0 2vw;
}
.news h3 {
  margin: 3vw 0;
}
.news a {
  color: #818486;
  font-size: 4vw;
  margin: 3vw 0;
}
.news img {
  width: 94vw;
  border-radius: 2vw;
  margin-bottom: 2vw;
}
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
</style>
